<template >
  <div class="course-management">
    <!-- 课程分类筛选 -->
    <div class="filter-section">
      <el-select v-model="selectedCategory" placeholder="选择课程分类">
        <el-option
            v-for="category in courseCategories"
            :key="category.value"
            :label="category.label"
            :value="category.value"
        />
      </el-select>
      <el-button type="primary" @click="openCourseDialog">新增课程</el-button>
    </div>

    <!-- 课程能力映射表 -->
    <el-table :data="filteredCourses" border style="width: 100%">
      <el-table-column prop="courseCode" label="课程代码" width="120" />
      <el-table-column prop="courseName" label="课程名称" />
      <el-table-column label="对应能力" width="300">
        <template #default="{row}">
          <el-select
              v-model="row.relatedAbilities"
              multiple
              filterable
              allow-create
              @change="updateCourseAbilities(row)"
          >
            <el-option
                v-for="ability in abilityOptions"
                :key="ability"
                :label="ability"
                :value="ability"
            />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="学分权重" width="150">
        <template #default="{row}">
          <el-input-number
              v-model="row.creditWeight"
              :min="0.5"
              :max="5"
              :step="0.5"
              @change="updateCourseWeight(row)"
          />
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增课程对话框 -->
    <el-dialog v-model="showCourseDialog" title="新增课程">
      <course-form @submit="handleNewCourse" />
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useCourseStore } from '@/stores/courseStore'
import CourseForm from '@/components/CourseForm.vue'

const courseStore = useCourseStore()
const selectedCategory = ref('all')
const showCourseDialog = ref(false)

// 初始化获取课程数据
courseStore.fetchCourses()

// 课程分类选项
const courseCategories = [
  { value: 'general', label: '通识教育' },
  { value: 'discipline', label: '学科教育' },
  { value: 'professional', label: '专业教育' },
  { value: 'second-class', label: '第二课堂' }
]

// 能力选项（可扩展）
const abilityOptions = ref([
  '数据建模', 'SQL优化', '系统设计',
  '算法实现', '团队协作', '创新思维'
])

// 计算过滤后的课程
const filteredCourses = computed(() => {
  if (selectedCategory.value === 'all') return courseStore.courses
  return courseStore.courses.filter(
      c => c.category === selectedCategory.value
  )
})

const openCourseDialog = () => {
  showCourseDialog.value = true
}

const handleNewCourse = async (newCourse) => {
  await courseStore.addCourse(newCourse)
  showCourseDialog.value = false
}

const updateCourseAbilities = async (course) => {
  await courseStore.updateCourse(course.id, {
    relatedAbilities: course.relatedAbilities
  })
}

const updateCourseWeight = async (course) => {
  await courseStore.updateCourse(course.id, {
    creditWeight: course.creditWeight
  })
}
</script>